<!DOCTYPE html>
<html>
<head>
	{include file='top.tpl'}
</head>
<body class="skin-blue">
<div class="wrapper">
	{include file="bread_crumbs.tpl"}
	<!--引入面包屑-->
	<section class="web-setting-wrap">
		<div class="row">
			<div class="col-md-12">
				<div class="box">
	                <div class="box-header with-border">
                        <a href="javascript:void(0);" class="btn btn-primary btn-sm" id='js_addMenu'><i class="fa fa-plus mr5"></i>新增菜单</a>
	                </div>
                    <!-- /.box-header -->
	                <div class="box-body">
	                  <table class="table table-bordered table-hover">
                        <thead>
	                    <tr>
	                      <th width="300">操作</th>
	                      <th width="100">编号</th>
	                      <th>菜单名称</th>
	                      <th width="400">URL</th>
	                      <th width="150">是否在菜单显示</th>
	                    </tr>
                        </thead>
						<!--表头-->
						{if count($datas)>0}      
                        <tbody>                  
                        {foreach from=$datas key=topMenuKey item=topMenu}                        
	                    <tr class="success">
	                      <td>
	                      	<a href="javascript:void(0);" class="btn btn-primary btn-sm" data-toggle="tooltip" data-original-title="编辑" name='edit_menu' menu_id='{$topMenu.menu_id}'><i class="fa fa-pencil"></i></a>
	                      	<a href="javascript:void(0);" class="btn btn-danger btn-sm" data-toggle="tooltip" data-original-title="删除" name='del_menu' menu_id='{$topMenu.menu_id}' menu_name='{$topMenu.name}'><i class="fa fa-remove"></i></a>
	                      </td>
	                      <td>{$topMenu.menu_id}</td>
	                      <td class="text-left menu_name">{$topMenu.name}</td>
	                      <td>{if $topMenu.module}/{$topMenu.module}{/if}{if $topMenu.controller}/{$topMenu.controller}{/if}{if $topMenu.action}/{$topMenu.action}{/if}</td>
	                      <td>{if $topMenu.is_show eq '1'}是{else}否{/if}</td>                     
	                    </tr>
		                    <!--第一级-->
		                    {if isset($topMenu.children)}
	                        {foreach from=$topMenu.children key=secondMenuKey item=secondMenu}
		                    <tr class="info">
								<td>
									<a href="javascript:void(0);" class="btn btn-primary btn-sm" data-toggle="tooltip" data-original-title="编辑" name='edit_menu' menu_id='{$secondMenu.menu_id}'><i class="fa fa-pencil"></i></a>
			                      	<a href="javascript:void(0);" class="btn btn-danger btn-sm" data-toggle="tooltip" data-original-title="删除" name='del_menu' menu_id='{$secondMenu.menu_id}' menu_name='{$secondMenu.name}'><i class="fa fa-remove"></i></a>
								</td>
								<td width="100">{$secondMenu.menu_id}</td>
								<td class="text-left menu_name" style="text-indent:2em;">{$secondMenu.name}</td>
								<td width="400">{if $secondMenu.module}/{$secondMenu.module}{/if}{if $secondMenu.controller}/{$secondMenu.controller}{/if}{if $secondMenu.action}/{$secondMenu.action}{/if}</td>
								<td width="150">{if $secondMenu.is_show eq '1'}是{else}否{/if}</td>
							</tr>
								<!--第二级-->		
								{if isset($secondMenu.children)}
		                        {foreach from=$secondMenu.children key=thirdMenuKey item=thirdMenu}			
								<tr class="default">
									<td>
										<a href="javascript:void(0);" class="btn btn-primary btn-sm" data-toggle="tooltip" data-original-title="编辑" name='edit_menu' menu_id='{$thirdMenu.menu_id}'><i class="fa fa-pencil"></i></a>
				                      	<a href="javascript:void(0);" class="btn btn-danger btn-sm" data-toggle="tooltip" data-original-title="删除" name='del_menu' menu_id='{$thirdMenu.menu_id}' menu_name='{$thirdMenu.name}'><i class="fa fa-remove"></i></a>
				                      	<a href="javascript:void(0);" class="btn btn-primary btn-sm" data-toggle="tooltip" data-original-title="添加元素" name='add_note' menu_id='{$thirdMenu.menu_id}'><i class="fa fa-plus"></i></a>
				                      	<a href="javascript:void(0);" class="btn btn-primary btn-sm" data-toggle="tooltip" data-original-title="查看元素" name='view_note' menu_id='{$thirdMenu.menu_id}'><i class="fa fa-eye"></i></a>
									</td>
									<td>{$thirdMenu.menu_id}</td>
									<td class="text-left menu_name" style="text-indent:4em;">{$thirdMenu.name}</td>
									<td>{if $thirdMenu.module}/{$thirdMenu.module}{/if}{if $thirdMenu.controller}/{$thirdMenu.controller}{/if}{if $thirdMenu.action}/{$thirdMenu.action}{/if}</td>
									<td>{if $thirdMenu.is_show eq '1'}是{else}否{/if}</td>
			                    </tr>                                
			                    {/foreach}
		                        {/if}
	                        {/foreach}
	                        {/if}
                        {/foreach}
                        </tbody> 
                        {/if}
	                    <!--第三级-->	       	                    
	              	</table>
	                </div>
	                <!-- .box-body -->
	              </div>
			</div>
		</div>
	</section>
</div>

<!-- 编辑添加 -->
<div style='display:none;width:400px;padding-top:10px;padding-left:10px;' id="js_RemarkPop">
        <div class="form-group">
            <label>父级菜单：</label>
            <select class="form-control" name="menu_id" id="menu_id">
                <option value="0">选择</option>
                {foreach from=$datas key=topMenuKey item=topMenu}                        
	                    <option value="{$topMenu.menu_id}">{$topMenu.name}</option>
		                    {if isset($topMenu.children)}
	                        {foreach from=$topMenu.children key=secondMenuKey item=secondMenu}
		                    <option value="{$secondMenu.menu_id}">-------{$secondMenu.name}</option>
								<!--第二级-->		
								{if isset($secondMenu.children)}
		                        {foreach from=$secondMenu.children key=thirdMenuKey item=thirdMenu}			
								<option value="{$thirdMenu.menu_id}">--------------{$thirdMenu.name}</option>                              
			                    {/foreach}
		                        {/if}
	                        {/foreach}
	                        {/if}
                        {/foreach}
            </select>
        </div>
        <div class="form-group">
            <label>菜单名称：</label>
            <input type="text" name="name" id="name" class="form-control">
        </div>
        <div class="form-group">
            <label>菜单简述：</label>
            <input type="text" name="description" id="description" class="form-control">
        </div>
        <div class="form-group">
            <label>模块：</label>
            <input type="text" name="module" id="module" class="form-control">
        </div>
        <div class="form-group">
            <label>控制器：</label>
            <input type="text" name="controller" id="controller" class="form-control">
        </div>
        <div class="form-group">
            <label>方法：</label>
            <input type="text" name="action" id="action" class="form-control">
        </div>
        <div class="form-group">
            <label>是否显示：</label>
            <input type="radio" name="is_show"  value="1">是
            <input type="radio" name="is_show"  value="0">否
        </div>
        <div class=" text-center pt10">
            <input type="hidden" name="menu_id_edit" id="menu_id_edit"/> 
            <button type="submit" class="btn btn-primary fb pr20 pl20" onclick="return menu_save()">保存</button>
        </div>
</div>

<!-- 查看菜单 -->
<div style='display:none;width:650px;padding-top:10px;padding-left:10px;' id="view_note_div">
    <table>
    <tr id='note_first_tr'>
    <td width='100' align='center'><span style='font-weight:900;font-size:15px;'>序号</span></td>
    <td width='150' align='center'><span style='font-weight:900;font-size:15px;'>元素名称</span></td>
    <td width='100' align='center'><span style='font-weight:900;font-size:15px;'>元素URL</span></td>
    <td width='150' align='center'><span style='font-weight:900;font-size:15px;'>描述</span></td>
    <td width='100' align='center'><span style='font-weight:900;font-size:15px;'>操作</span></td>
    </tr>
    </table>
</div>

{include file='foot.tpl'}
{literal}
<script>
//添加菜单
$("#js_addMenu").on("click", function() {
	$("#menu_id").val('0');
    $("#name").val('');
    $("#module").val('');
    $("#controller").val('');
    $("#action").val('');
    $("input[name='is_show']").parent().attr('style','display:');
    $("input[name='is_show']").prop('checked',false);
    $("#menu_id_edit").val('');
    $("#sort").val(0);
    layer.open({
        type: 1,
        title:'新增菜单',
        skin: 'layui-layer-lan',
        area: ['420px', '640px'], //宽高
        content: $("#js_RemarkPop")  //也可以 $("#div")
    });
});

//添加元素
$("a[name='add_note']").on("click",function(){
	$("#menu_id").val($(this).attr('menu_id'));
    $("#menu_id").prev("label").text("父级元素");
    $("#name").val('');
    $("#name").prev("label").text("元素名称");
    $("#description").val('');
    $("#description").prev("label").text("元素简述");
    $("#module").val('');
    $("#controller").val('');
    $("#action").val('');
    $("input[name='is_show'][value='0']").prop('checked',true);
    $("input[name='is_show']").parent().attr('style','display:none');
    $("#menu_id_edit").val('');
    $("#sort").val(0);
    layer.open({
        type: 1,
        title:'新增元素',
        skin: 'layui-layer-lan',
        area: ['420px', '640px'], //宽高
        content: $("#js_RemarkPop")  //也可以 $("#div")
    });
})

//查看元素
$("a[name='view_note']").on("click",function(){
	$('#note_first_tr').siblings().remove();
	id = $(this).attr('menu_id');
	if(id){
		$.ajax({
	        type:"POST",
	        url:"/system/menu/getnote",
	        data:{'id':id},
	        success:function(res){
	        	if(res){
                    try{
                        var obj = eval('('+res+')');
                        if ( typeof obj == "object" && obj.status == 0) {
                            layer.alert(obj.message);
                            return false;
                        }
                    } catch(e) {
                        $('#view_note_div').children().first().append(res);
                        layer.open({
                            type: 1,
                            title:'查看元素',
                            skin: 'layui-layer-lan',
                            area: ['650px', '400px'], //宽高
                            content: $("#view_note_div") //也可以 $("#div")
                        });
                    }
	        	}else{
	        		layer.alert('该菜单没有所属元素');
	        	}
	        }
	    });
	}
})

//编辑菜单
$("a[name='edit_menu']").on("click",function(){
    var menu_id = $(this).attr('menu_id');
    $.ajax({
        type:"POST",
        url:"/system/menu/getmenu",
        data:{'id':menu_id},
        success:function(res){
            var obj = eval('('+res+')');
            if (obj.status == 0) {
                layer.alert(obj.message);
                return false;
            };
            $("#menu_id").val(obj.fid);
            $("#name").val(obj.name);
            $("#description").val(obj.tips);
            $("#module").val(obj.module);
            $("#controller").val(obj.controller);
            $("#action").val(obj.action);
            $("input[name='is_show']").parent().attr('style','display:');
            $("input[name='is_show'][value='"+obj.is_show+"']").prop('checked',true);
            $("#menu_id_edit").val(obj.menu_id);
            layer.open({
                type: 1,
                title:'编辑菜单',
                skin: 'layui-layer-lan',
                area: ['420px', '600px'], //宽高
                content: $("#js_RemarkPop")  //也可以 $("#div")
            });
        }
    });
});

//删除菜单
$("a[name='del_menu']").on('click',function(){
    del_menu($(this));
});


$("#view_note_div").on('click','a[name="del_menu"]',function(){
	del_menu($(this));
});

function del_menu($that){
	var menu_id = $that.attr('menu_id');
    var menu_name = $that.attr('menu_name');
    layer.confirm('您确定删除 '+menu_name+' 吗？', function(){
    //删除成功
        $.ajax({
            type:"POST",
            url:"/system/menu/delmenu",
            data:{'menu_id':menu_id,'menu_name':menu_name},
            success:function(res){
                var obj = eval('('+res+')');
                if(obj.opr == '1'){
                    layer.alert(obj.content);
                    location.reload();
                }else if(obj.opr == '0'){
                    layer.alert(obj.content);
                } else {
                    layer.alert(obj.message);
                }
            }
        }); 
    });
}
function menu_save(){
    var menu_id_edit = $("#menu_id_edit").val();
    var menu_id = $("#menu_id").val();
    var name = $.trim($("#name").val());
    var description = $.trim($("#description").val());
    if(name == ''){
        layer.alert('菜单名称不能为空!',8);
        return false;
    }
    var module = $.trim($("#module").val());
    var controller = $.trim($("#controller").val());
    var action = $.trim($("#action").val());

    var is_show = $("input[name='is_show']:checked").val();
    if(is_show == undefined){
        layer.alert('是否显示必须选',8);
        return false;
    }
    $.ajax({
        type:"POST",
        url:"/system/menu/replacemenu",
        data:{'menu_id_edit':menu_id_edit,'menu_id':menu_id,'name':name,'description':description,'module':module,'controller':controller,'action':action,'is_show':is_show},
        dataType: 'json',
        success:function(res){
            if(res.opr == '1'){
                layer.alert(res.content,8);
                location.reload();
            }else if(res.opr == '0'){
                layer.alert(res.content,8);
            } else {
                layer.alert(res.message);
            }
        }
    });
}
</script>
{/literal}
</body>
</html>
